<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@page import="java.util.List"%>
<%@page import="com.qdu.entity.Book"%>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!doctype html>
<html lang="zh" class="no-js">

    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <base href="${pageContext.request.contextPath}/" />
        <title>个人资料</title>
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
        <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
        <link rel="stylesheet" href="static/profile/css/reset.css"> <!-- CSS reset -->
        <link rel="stylesheet" type="text/css" href="static/profile/css/default.css">
        <link rel="stylesheet" href="static/profile/css/style.css"> <!-- Resource style -->
        <script src="static/profile/js/modernizr.js"></script> <!-- Modernizr -->
        <script src="static/profile/js/cityAndPro.js"></script> <!-- Modernizr -->
    </head>

    <body>


        <ul class="cd-pricing" style="
            display: flex;
            justify-content: center;
            ">

            <div  style="width: 82%;">
                <li >
                    <header class="cd-pricing-header">
                        <h2>${user.getUname()}</h2>

                        <div class="cd-price">
                            <span>欢迎你！</span>
                            <span>😀</span>

                        </div>
                    </header> <!-- .cd-pricing-header -->

                    <div class="cd-pricing-features">

                    </div> <!-- .cd-pricing-features -->

                    <footer class="cd-pricing-footer">
                        <a id="show" href="#0">Show</a>
                    </footer> <!-- .cd-pricing-footer -->
                </li>
            </div>



        </ul> <!-- .cd-pricing -->

        <div class="cd-form" style="top: 90px">
            <div class="cd-plan-info">
                <!-- content will be loaded using jQuery - according to the selected plan -->
            </div>

            <div class="cd-more-info">
                <h3>个人资料</h4>
                    <p>在这里你可以更改你的个人信息</p>
                    <div style="height: 30%;"></div>
                    <div style="    float: left;
                         display: flex;
                         width: 100%;
                         justify-content: space-around">
                        <div><a style="
                                height: 30px;
                                " class="ant-btn ant-btn-red" href="Mycomment.jsp" >我的评论</a></div>
                        <div><a style="
                                height: 30px;
                                " class="ant-btn ant-btn-red" href="Myfavorites.jsp">我的收藏</a></div> 


                    </div>

            </div>

            <form  action="UserInfo?method=fixInfo"  enctype="multipart/form-data" method="post">
                <fieldset  style="
                           width: 10%;
                           position: fixed;
                           left: 2.9%;
                           top: 28%;
                           z-index: 10;
                           "  >
                    <img class="img-thumbnail" id="my-img" src="images/${user!=null ? user.getUicon():'default.jpg'}">
                    <input id="img-upload" style="
                           display: none;
                           " type="file" name="file1" ><br/>
                </fieldset>
                <fieldset>
                    <legend>个人信息</legend>

                    <div class="half-width">
                        <label for="userName">用户名</label>
                        <input type="text" id="userName" name="userName" value="${user.getUname()}" readonly
                               unselectable="on">
                    </div>

                    <div class="half-width">
                        <label for="userEmail">邮箱</label>
                        <input type="email" id="userEmail" name="userEmail" value="${user.getUemail() }">
                    </div>

                    <div class="half-width">
                        <label for="userPassword">密码</label>
                        <input type="password" id="userPassword" name="userPassword" value="${user.getUpwd() }" onblur="if (this.value.replace(/^ +| +$/g, '') == '')
                                    alert('密码不能为空!')">
                    </div>

                    <div class="half-width">
                        <label for="userPhone">手机号</label>
                        <input type="text" id="userPhone" name="userPhone" value="${user.getUphone() }">
                    </div>
                </fieldset>

                <fieldset>
                    <legend>性别</legend>
                    <!-- <label>性别</label> -->
                    <div>
                        <ul class="cd-payment-gateways">
                            <li>
                                <input type="radio" name="sex" id="man" value="man">
                                <label for="man">男</label>
                            </li>

                            <li>
                                <input type="radio" name="sex" id="woman" value="woman" checked>
                                <label for="woman">女</label>
                            </li>
                        </ul> <!-- .cd-payment-gateways -->
                    </div>
                    <div>
                        <div>
                            <p class="half-width">
                                <label for="userbirthday">生日</label>
                                <input type="date" id="userbirthday" name="userbirthday" value="${user.getUbirth()}"
                                       style="    height: 45px;border: 2px solid #e5e5e5;border-radius: 0;background: transparent;width: 100%;">
                            </p>


                        </div>
                        <label>所在地址</label>
                        <div>

                            <span class="cd-select">
                                <select name="input_province" id="input_province">

                                    <option value=" ">--请选择--</option>
                                </select>


                                <select name="input_city" id="input_city" class="form-control">
                                    <option value="">--请选择--</option>
                            </span>

                            </select>



                        </div>
                    </div>
                </fieldset>

                <fieldset>
                    <div>
                        <input type="submit" id="sumit" value="保存修改">
                    </div>
                </fieldset>
            </form>
            <a href="#0" class="cd-close"></a>
        </div> <!-- .cd-form -->

        <div class="cd-overlay">


        </div> <!-- shadow layer -->
        <%
            Object message = request.getAttribute("message");
            if (message != null && !"".equals(message)) {

        %>
        <script type="text/javascript">
            alert("<%=message%>");
        </script>
        <%}%>
        <style>
            input,
            button {
                border: none;
                outline: none;
            }

            .ant-btn {
                line-height: 1.499;
                position: relative;
                display: inline-block;
                font-weight: 400;
                white-space: nowrap;
                text-align: center;
                background-image: none;
                border: 1px solid transparent;
                -webkit-box-shadow: 0 2px 0 rgba(0, 0, 0, 0.015);
                box-shadow: 0 2px 0 rgba(0, 0, 0, 0.015);
                cursor: pointer;
                -webkit-transition: all .3s cubic-bezier(.645, .045, .355, 1);
                transition: all .3s cubic-bezier(.645, .045, .355, 1);
                -webkit-user-select: none;
                -moz-user-select: none;
                -ms-user-select: none;
                user-select: none;
                -ms-touch-action: manipulation;
                touch-action: manipulation;
                height: 32px;
                padding: 0 15px;
                font-size: 14px;
                border-radius: 4px;
                color: rgba(0, 0, 0, 0.65);
                background-color: #fff;
                border-color: #d9d9d9;
            }

            .ant-btn-red {
                color: #fff;
                background-color: #df4f71;
                border-color: #df4f71;
                text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.12);
                -webkit-box-shadow: 0 2px 0 rgba(0, 0, 0, 0.045);
                box-shadow: 0 2px 0 rgba(0, 0, 0, 0.045);
            }
        </style>
        <script src="static/profile/js/jquery-1.11.0.min.js" type="text/javascript"></script>
        <script src="static/profile/js/velocity.min.js"></script>
        <script src="static/profile/js/main.js"></script> <!-- Resource jQuery -->
        <script type="text/javascript">
//                            function submit() {
//                                document.upload.submit;
//                                document.profile.submit;
//                            }
            window.onload = function () {
                var inpEle = document.getElementById('userPhone');
                var myreg = /^[1][3,4,5,7,8][0-9]{9}$/;
                inpEle.onblur = function () {
                    var inpVal = this.value;
                    if (!myreg.exec(inpVal)) {
                        alert('请输自入正确的手机号')
                        document.getElementById('userPhone').value = ""
                    }
                }


                var reg = new RegExp("^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$"); //正则表达式
                var obj = document.getElementById("userEmail"); //要验证的对象
                obj.onblur = function () {

                    if (obj.value === "") { //输入不能为空
                        alert("邮箱不能为空!");
                        return false;
                    } else if (!reg.test(obj.value)) { //正则验证不通过，格式不对
                        alert("邮箱格式不正确!");
                        document.getElementById('userEmail').value = ""
                        return false;
                    } else {
//                        alert("通过！");
                        return true;
                    }
                }

            }

            $('#my-img').click(function () {
                $('#img-upload').click();
            });
//            $('#sumit').click(function () {
//                location.reload();
//            });


            $(function () {
                var html = "";
                var province_idx;
                $("#input_city").append(html);

                $.each(cityMessage, function (idx, item) {
                    if (item.parid == '1') {
                        html += "<option value='" + item.regname + "' exid='" + item.regid + "'>" + item.regname + "</option>";
                    }

                });
                $("#input_province").append(html);
                $("#input_province").change(function (e) {
                    var province = $(this).val();
                    var cityList = [];
                    if (province == "")
                        return;
                    $("#input_city option").remove();
                    var html = "<option value=''>--请选择--</option>";

                    //					获取已选择的省份的数组下标
                    $.each(cityMessage, function (idx, item) {
                        if (province == item.regname && item.parid == '1') {
                            province_idx = idx
                        }
                    })

                    //					获取已选择的省份的城市列表
                    $.each(cityMessage, function (idx, item) {
                        if (cityMessage[idx].parid == cityMessage[province_idx].regid) {
                            cityList.push(cityMessage[idx])
                        }
                    })

                    //					添加城市信息给标签
                    if (cityList instanceof Array && cityList.length > 0) {
                        $.each(cityList, function (idx, item) {
                            console.log(item)
                            html += "<option value='" + item.regname + "' exid='" + item.regid + "'>" + item.regname + "</option>";

                        });
                    } else {
                        html += "<option value='" + cityMessage[province_idx].regname + "' exid='" + cityMessage[province_idx].regid + "'>" + cityMessage[province_idx].regname + "</option>";

                    }
                    $("#input_city").append(html);
                });
            });
        </script>
    </body>

</html>